<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天中心 - 鹭行记</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="chat.css">
</head>
<body>
    <div class="chat-app">
        <!-- 侧边栏 -->
        <aside class="chat-sidebar">
            <div class="sidebar-header">
                <div class="app-logo">
                    <div class="logo-icon">💬</div>
                    <div class="logo-text">
                        <div class="app-name">鹭行记</div>
                        <div class="app-subtitle">CHAT CENTER</div>
                    </div>
                </div>
                <div class="header-actions">
                    <button class="action-btn" onclick="showNewChatModal()" title="新建聊天">
                        <span class="icon">➕</span>
                    </button>
                    <button class="action-btn" onclick="showSearchModal()" title="搜索用户">
                        <span class="icon">🔍</span>
                    </button>
                    <button class="action-btn" onclick="location.href='explore.html'" title="返回探索">
                        <span class="icon">🏠</span>
                    </button>
                </div>
            </div>

            <div class="user-status">
                <div class="current-user">
                    <div class="user-avatar online">👤</div>
                    <div class="user-info">
                        <div class="username">我的账号</div>
                        <div class="status-text">在线</div>
                    </div>
                    <div class="status-indicator"></div>
                </div>
            </div>

            <div class="chat-tabs">
                <button class="tab-btn active" onclick="switchTab('recent')">
                    <span class="tab-icon">💬</span>
                    <span class="tab-text">最近聊天</span>
                    <span class="unread-badge">3</span>
                </button>
                <button class="tab-btn" onclick="switchTab('contacts')">
                    <span class="tab-icon">👥</span>
                    <span class="tab-text">联系人</span>
                </button>
                <button class="tab-btn" onclick="switchTab('groups')">
                    <span class="tab-icon">👨‍👩‍👧‍👦</span>
                    <span class="tab-text">群聊</span>
                    <span class="unread-badge">1</span>
                </button>
            </div>

            <div class="chat-list" id="chatList">
                <!-- 最近聊天列表 -->
                <div class="chat-item active" onclick="openChat('user1')">
                    <div class="chat-avatar">
                        <div class="avatar online">👨</div>
                        <div class="unread-count">2</div>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">张小明</div>
                        <div class="last-message">厦门大学真的很美！</div>
                        <div class="chat-time">10:30</div>
                    </div>
                </div>

                <div class="chat-item" onclick="openChat('user2')">
                    <div class="chat-avatar">
                        <div class="avatar">👩</div>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">李小红</div>
                        <div class="last-message">鼓浪屿的钢琴博物馆值得一去</div>
                        <div class="chat-time">昨天</div>
                    </div>
                </div>

                <div class="chat-item" onclick="openChat('group1')">
                    <div class="chat-avatar">
                        <div class="avatar group">🏝️</div>
                        <div class="unread-count">1</div>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">厦门旅游交流群</div>
                        <div class="last-message">王小华: 有人一起去南普陀寺吗？</div>
                        <div class="chat-time">09:15</div>
                    </div>
                </div>

                <div class="chat-item" onclick="openChat('user3')">
                    <div class="chat-avatar">
                        <div class="avatar">👨‍💼</div>
                    </div>
                    <div class="chat-info">
                        <div class="chat-name">旅游向导-小陈</div>
                        <div class="last-message">为您推荐最佳旅游路线</div>
                        <div class="chat-time">2天前</div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主聊天区域 -->
        <main class="chat-main">
            <div class="chat-header">
                <div class="chat-user-info">
                    <div class="chat-user-avatar">
                        <div class="avatar online">👨</div>
                    </div>
                    <div class="chat-user-details">
                        <div class="chat-user-name">张小明</div>
                        <div class="chat-user-status">在线 - 正在输入...</div>
                    </div>
                </div>
                <div class="chat-actions">
                    <button class="chat-action-btn" onclick="startVideoCall()" title="视频通话">
                        <span class="icon">📹</span>
                    </button>
                    <button class="chat-action-btn" onclick="startVoiceCall()" title="语音通话">
                        <span class="icon">📞</span>
                    </button>
                    <button class="chat-action-btn" onclick="showChatInfo()" title="聊天信息">
                        <span class="icon">ℹ️</span>
                    </button>
                </div>
            </div>

            <div class="chat-messages" id="chatMessages">
                <div class="message-group">
                    <div class="message received">
                        <div class="message-avatar">👨</div>
                        <div class="message-content">
                            <div class="message-bubble">
                                你好！我刚到厦门，有什么推荐的景点吗？
                            </div>
                            <div class="message-time">10:25</div>
                        </div>
                    </div>
                </div>

                <div class="message-group">
                    <div class="message sent">
                        <div class="message-content">
                            <div class="message-bubble">
                                欢迎来到厦门！推荐你先去鼓浪屿，那里有很多历史建筑和美丽的海景
                            </div>
                            <div class="message-time">10:26</div>
                        </div>
                        <div class="message-avatar">👤</div>
                    </div>
                </div>

                <div class="message-group">
                    <div class="message received">
                        <div class="message-avatar">👨</div>
                        <div class="message-content">
                            <div class="message-bubble image-message">
                                <img src="https://via.placeholder.com/200x150/4ecdc4/ffffff?text=厦门大学" alt="厦门大学">
                                <div class="image-caption">厦门大学真的很美！</div>
                            </div>
                            <div class="message-time">10:30</div>
                        </div>
                    </div>
                </div>

                <div class="message-group">
                    <div class="message sent">
                        <div class="message-content">
                            <div class="message-bubble">
                                是的！厦门大学被誉为中国最美大学之一，校园依山傍海，建筑风格独特
                            </div>
                            <div class="message-time">10:31</div>
                        </div>
                        <div class="message-avatar">👤</div>
                    </div>
                </div>

                <div class="typing-indicator">
                    <div class="typing-avatar">👨</div>
                    <div class="typing-bubble">
                        <div class="typing-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chat-input-area">
                <div class="input-tools">
                    <button class="tool-btn" onclick="toggleEmojiPanel()" title="表情">
                        <span class="icon">😊</span>
                    </button>
                    <button class="tool-btn" onclick="selectImage()" title="图片">
                        <span class="icon">🖼️</span>
                    </button>
                    <button class="tool-btn" onclick="selectFile()" title="文件">
                        <span class="icon">📎</span>
                    </button>
                    <button class="tool-btn" onclick="startVoiceRecord()" title="语音">
                        <span class="icon">🎤</span>
                    </button>
                    <button class="tool-btn" onclick="shareLocation()" title="位置">
                        <span class="icon">📍</span>
                    </button>
                </div>
                <div class="input-container">
                    <textarea 
                        id="messageInput" 
                        class="message-input" 
                        placeholder="输入消息..."
                        rows="1"
                        onkeydown="handleInputKeydown(event)"
                        oninput="handleInputChange()"
                    ></textarea>
                    <button class="send-btn" onclick="sendMessage()" id="sendBtn">
                        <span class="icon">➤</span>
                    </button>
                </div>
            </div>

            <!-- 表情面板 -->
            <div class="emoji-panel" id="emojiPanel">
                <div class="emoji-categories">
                    <button class="emoji-cat active" onclick="showEmojiCategory('recent')">🕒</button>
                    <button class="emoji-cat" onclick="showEmojiCategory('smileys')">😊</button>
                    <button class="emoji-cat" onclick="showEmojiCategory('travel')">✈️</button>
                    <button class="emoji-cat" onclick="showEmojiCategory('objects')">🎯</button>
                </div>
                <div class="emoji-grid" id="emojiGrid">
                    <span class="emoji-item" onclick="insertEmoji('😊')">😊</span>
                    <span class="emoji-item" onclick="insertEmoji('😂')">😂</span>
                    <span class="emoji-item" onclick="insertEmoji('❤️')">❤️</span>
                    <span class="emoji-item" onclick="insertEmoji('👍')">👍</span>
                    <span class="emoji-item" onclick="insertEmoji('🎉')">🎉</span>
                    <span class="emoji-item" onclick="insertEmoji('🌟')">🌟</span>
                    <span class="emoji-item" onclick="insertEmoji('🏝️')">🏝️</span>
                    <span class="emoji-item" onclick="insertEmoji('🌊')">🌊</span>
                    <span class="emoji-item" onclick="insertEmoji('🎓')">🎓</span>
                    <span class="emoji-item" onclick="insertEmoji('🏯')">🏯</span>
                    <span class="emoji-item" onclick="insertEmoji('🎹')">🎹</span>
                    <span class="emoji-item" onclick="insertEmoji('📸')">📸</span>
                </div>
            </div>
        </main>

        <!-- 聊天信息面板 -->
        <aside class="chat-info-panel" id="chatInfoPanel">
            <div class="info-header">
                <h3>聊天信息</h3>
                <button class="close-btn" onclick="hideChatInfo()">✕</button>
            </div>
            <div class="info-content">
                <div class="user-profile">
                    <div class="profile-avatar">👨</div>
                    <div class="profile-name">张小明</div>
                    <div class="profile-status">在线</div>
                </div>
                <div class="info-actions">
                    <button class="info-action-btn">
                        <span class="icon">📞</span>
                        <span class="text">语音通话</span>
                    </button>
                    <button class="info-action-btn">
                        <span class="icon">📹</span>
                        <span class="text">视频通话</span>
                    </button>
                    <button class="info-action-btn">
                        <span class="icon">📁</span>
                        <span class="text">聊天文件</span>
                    </button>
                </div>
                <div class="chat-settings">
                    <div class="setting-item">
                        <span class="setting-label">消息免打扰</span>
                        <label class="switch">
                            <input type="checkbox">
                            <span class="slider"></span>
                        </label>
                    </div>
                    <div class="setting-item">
                        <span class="setting-label">置顶聊天</span>
                        <label class="switch">
                            <input type="checkbox">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    <!-- 新建聊天弹窗 -->
    <div class="modal" id="newChatModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>新建聊天</h3>
                <button class="close-btn" onclick="hideNewChatModal()">✕</button>
            </div>
            <div class="modal-body">
                <div class="search-box">
                    <input type="text" placeholder="搜索用户..." class="search-input">
                    <button class="search-btn">🔍</button>
                </div>
                <div class="user-list">
                    <div class="user-item" onclick="startNewChat('user4')">
                        <div class="user-avatar">👩‍💼</div>
                        <div class="user-info">
                            <div class="user-name">王小华</div>
                            <div class="user-desc">旅游达人</div>
                        </div>
                    </div>
                    <div class="user-item" onclick="startNewChat('user5')">
                        <div class="user-avatar">👨‍🎓</div>
                        <div class="user-info">
                            <div class="user-name">刘小强</div>
                            <div class="user-desc">摄影爱好者</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <input type="file" id="imageInput" accept="image/*" style="display: none;" onchange="handleImageSelect(event)">
    <input type="file" id="fileInput" style="display: none;" onchange="handleFileSelect(event)">

    <script src="chat.js"></script>
</body>
</html>